import React from 'react';
import { Player } from '@remotion/player';
import { MyVideo } from './MyVideo';
import { hydrateRoot } from 'react-dom/client';

const durationInFramesValue = 975; // Matching the duration from your example

export const RemotionPreview = () => {
  return (
    <div style={{ width: '100%', height: '100%' }}>
      <Player
        component={MyVideo}
        durationInFrames={150}
        compositionWidth={1920}
        compositionHeight={1080}
        fps={30}
        controls
        autoPlay
        style={{
          width: '100%',
          height: '100%',
        }}
      />
    </div>
  );
};
export default RemotionPreview;
hydrateRoot(document.getElementById('preview-container')!, <RemotionPreview />);
